<template>
	<BackgroundImage>
		<!-- 顶部导航 -->
		<TopNavigation title="赛程模式管理" backText="首页" titleSub="管理赛程模型配置" />
		
		<view class="view-container">
            <!-- 列表视图 -->
            <template v-if="!showFormView">
            <view class="view-container-left">
                <view class="view-container-left-top" @click="showCreateForm">
                    创建模式
                </view>
                <view class="view-container-left-bottom" @click="goToRoomModel">
                    房间模式管理
                </view>
                <view class="view-container-left-bottom" @click="goToSettleModel">
                    结算方式管理
                </view>
            </view>
            <view class="view-container-right">
                <BoxView :titBoxObj="{
                    title: '模式列表',
                    titleCount: `共有${modelList.length}个模式`
                }" padding="0" >
                   <view class="view-container-right-list">
                        <view v-if="loading" class="loading-container">
                            <view class="loading-spinner"></view>
                            <text>加载中...</text>
                        </view>
                        <view v-else-if="modelList.length === 0" class="empty-state">
                            <text>暂无赛程模式</text>
                        </view>
                        <template v-else>
                        <view 
                            class="view-container-right-list-item" 
                            v-for="model in modelList" 
                            :key="model.id"
                        >
                            <!-- 正常显示模式 -->
                            <template v-if="currentViewMode[model.id] !== 'bindRoom' && currentViewMode[model.id] !== 'bindSettle'">
                            <view class="view-container-right-list-item-title">
                                <text style="font-size: 16rpx;font-weight: bold;">{{ model.matchScheduleModelName || '未命名' }}</text>
                                <view class="next-row">
                                    <view class="id-text"><text>模式ID：</text>{{ model.id }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-value"><text>房间数量：</text>{{ model.roomNum || '自动计算' }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>房间类型：</text>{{ getRoomTypeText(model.roomType) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-text"><text>启动类型：</text>{{ getStartTypeText(model.roomStartType) }}</view>
                                    <view class="id-value"><text>参与模式：</text>{{ getJoinModelText(model.roomJoinModel) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-value"><text>限制模式：</text>{{ getLimitModelText(model.roomLimitModel) }}</view>
                                    <view class="id-text"><text>获胜模式：</text>{{ getWinModelText(model.matchWinModel) }}</view>
                                </view>
                                <view class="next-row">
                                    <view class="id-value"><text>报名模式：</text>{{ getRegTypeText(model.matchRegType) }}</view>
                                </view>
                                <view class="next-button">
                                    <view class="next-button-item1" @click.stop="showBindRoom(model)">绑定房间</view>
                                    <view class="next-button-item2" @click.stop="showBindSettle(model)">绑定结算</view>
                                    <view class="next-button-item3" @click.stop="editModel(model)">编辑</view>
                                    <view class="next-button-item4" @click.stop="openDeleteConfirm(model)">删除</view>
                                </view>
                            </view>
                            </template>
                            
                            <!-- 绑定房间视图 -->
                            <BindRoom 
                                v-else-if="currentViewMode[model.id] === 'bindRoom'"
                                :schedule-model-id="model.id"
                                @close="closeBindRoom(model.id)"
                            />
                            
                            <!-- 绑定结算视图 -->
                            <BindSettle 
                                v-else-if="currentViewMode[model.id] === 'bindSettle'"
                                :schedule-model-id="model.id"
                                @close="closeBindSettle(model.id)"
                            />
                        </view>
                        </template>
                   </view>

                </BoxView>
            </view>
            </template>
            
            <!-- 表单视图 -->
            <ScheduleModelForm v-else @close="closeFormView" />
	    </view>
    
      <!-- 删除确认弹窗 -->
      <PopuleView
        v-model="showDeleteConfirm"
        title="确认删除"
        :description="deleteConfirmText"
        :show-submit="true"
        submit-text="确认删除"
        @submit="confirmDelete"
      />
	</BackgroundImage>
</template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { MatchScheduleModelAPI, MatchRoomModelAPI, MatchScheduleModelRefAPI, MatchScheduleModelSettleRefAPI, MatchScheduleSettleAPI } from '@/api/battle.js'
  import TopNavigation from "@/components/UiView/TopNavigation.vue";
  import BackgroundImage from "@/components/BackgroundImage.vue";
  import BoxView from "@/components/UiView/BoxView.vue";
  import ScheduleModelForm from "./bindle.vue";
  import BindRoom from "./bindRoom.vue";
  import BindSettle from "./bandSettle.vue";
  import PopuleView from "@/components/UiView/PopuleView.vue";
  
//   const { isLandscape } = useIsLandscape()
  
  // 响应式数据
  const loading = ref(false)
  const showFormView = ref(false) // 控制表单视图显示
  const searchKeyword = ref('')
  const modelList = ref([])
  
  // 视图模式控制：每个模型可以有不同的视图模式（normal, bindRoom, bindSettle）
  const currentViewMode = ref({})
  
  // 删除确认弹窗
  const showDeleteConfirm = ref(false)
  const currentDeleteModel = ref(null)
  
  // 删除确认文本
  const deleteConfirmText = computed(() => {
    if (currentDeleteModel.value) {
      return `确定要删除模式 ${currentDeleteModel.value.id} 吗？`
    }
    return '确定要删除吗？'
  })
  
  // 选项数据（用于显示）
  const roomTypeOptions = [
    'N对N 2组', '单人 1组', '1对1 2组', '2对2 2组', '单人多组 N组', '多人多组 N组'
  ]
  const startTypeOptions = ['定时开赛', '手动开赛', '人满即开']
  const joinModelOptions = ['主动进入', '随机', '参考房间限制模式', '等级水平']
  const limitModelOptions = ['无限制', '水平 1-2之间', '水平 2-3之间']
  const winModelOptions = [
    '一回合 抢1分', '三回合 抢2分', '五回合 抢3分', '高分', 'BO3', 
    'AO5', 'BAO5', '时间短', '步数短', '距离长', '五局（抢3） 五回合（抢3）'
  ]
  const regTypeOptions = ['先报名', '预报名', '后报名', '自定义']
  
  // 结算类型选项
  const settleTypeOptions = ['普通结算', '积分结算', '排名结算', '自定义结算']
  
  // 获取选项文本
  const getRoomTypeText = (type) => roomTypeOptions[type] || '未知'
  const getStartTypeText = (type) => startTypeOptions[type] || '未知'
  const getJoinModelText = (type) => joinModelOptions[type] || '未知'
  const getLimitModelText = (type) => limitModelOptions[type] || '未知'
  const getWinModelText = (type) => winModelOptions[type - 1] || '未知'
  const getRegTypeText = (type) => regTypeOptions[type] || '未知'
  const getSettleTypeText = (type) => settleTypeOptions[type] || '未知'
  
  
  // 加载模式列表
  const loadModelList = async () => {
    console.log('开始加载模式列表...')
    loading.value = true
    try {
      const result = await MatchScheduleModelAPI.page({
        pageNum: 0,
        pageSize: 100
      })
      
      console.log('API返回结果:', result)
      
      if (result.code === 0 && result.data) {
        modelList.value = result.data.list || result.data || []
        console.log('模式列表加载成功，数量:', modelList.value.length)
        console.log('模式列表数据:', modelList.value)
      } else {
        modelList.value = []
        console.error('API返回错误:', result.msg)
        throw new Error(result.msg || '获取模式列表失败')
      }
    } catch (error) {
      console.error('获取模式列表失败:', error)
      modelList.value = []
      uni.showToast({
        title: error.message || '获取模式列表失败',
        icon: 'none',
        duration: 3000
      })
    } finally {
      loading.value = false
      console.log('加载完成，loading状态:', loading.value, '列表数量:', modelList.value.length)
    }
  }
  
  // 搜索功能
  const onSearch = () => {
    // 这里可以实现本地搜索或重新请求API
    console.log('搜索关键词:', searchKeyword.value)
  }
  
  // 跳转到房间模式管理页面
  const goToRoomModel = () => {
    uni.navigateTo({
      url: '/views/schedule-model-manage/room-model-manage'
    })
  }
  
  // 跳转到结算方式管理页面
  const goToSettleModel = () => {
    uni.navigateTo({
      url: '/views/schedule-model-manage/schedule-settle-manage'
    })
  }
  
  // 显示创建表单
  const showCreateForm = () => {
    // 清除编辑数据
    uni.removeStorageSync('editScheduleModelData')
    showFormView.value = true
  }
  
  // 编辑模式
  const editModel = (model) => {
    console.log('开始编辑模式:', model)
    
    // 使用全局存储传递模式数据
    try {
      const modelData = {
        id: model.id,
        matchScheduleModelId: model.id,
        matchScheduleModelName: model.matchScheduleModelName || '',
        roomNum: model.roomNum || 0,
        roomType: model.roomType !== undefined ? model.roomType : 2,
        roomTypeN: model.roomTypeN || 0,
        roomTypeM: model.roomTypeM || 0,
        roomStartType: model.roomStartType !== undefined ? model.roomStartType : 1,
        roomCreateModel: model.roomCreateModel || 0,
        roomJoinModel: model.roomJoinModel !== undefined ? model.roomJoinModel : 1,
        roomLimitModel: model.roomLimitModel !== undefined ? model.roomLimitModel : 0,
        matchModel: model.matchModel || 0,
        matchRegType: model.matchRegType !== undefined ? model.matchRegType : 0,
        matchWinModel: model.matchWinModel !== undefined ? model.matchWinModel : 3
      }
      uni.setStorageSync('editScheduleModelData', modelData)
      console.log('编辑数据已存储，准备显示表单')
      showFormView.value = true
    } catch (error) {
      console.error('存储编辑数据失败:', error)
      uni.showToast({
        title: '操作失败，请重试',
        icon: 'none'
      })
    }
  }
  
  // 关闭表单视图
  const closeFormView = () => {
    showFormView.value = false
    // 检查是否需要刷新列表
    const needRefresh = uni.getStorageSync('scheduleModelListNeedRefresh')
    if (needRefresh) {
      uni.removeStorageSync('scheduleModelListNeedRefresh')
      loadModelList()
    }
  }
  
  // 打开删除确认弹窗
  const openDeleteConfirm = (model) => {
    currentDeleteModel.value = model
    showDeleteConfirm.value = true
  }
  
  // 确认删除模式
  const confirmDelete = async () => {
    if (!currentDeleteModel.value) return
    
    try {
      const result = await MatchScheduleModelAPI.remove({
        matchScheduleModelId: currentDeleteModel.value.id
      })
      
      if (result.code === 0) {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        showDeleteConfirm.value = false
        currentDeleteModel.value = null
        loadModelList()
      } else {
        throw new Error(result.msg || '删除失败')
      }
    } catch (error) {
      console.error('删除模式失败:', error)
      uni.showToast({
        title: error.message || '删除失败',
        icon: 'none'
      })
    }
  }
  
  // 显示绑定房间视图
  const showBindRoom = (model) => {
    currentViewMode.value[model.id] = 'bindRoom'
  }
  
  // 关闭绑定房间视图
  const closeBindRoom = (modelId) => {
    currentViewMode.value[modelId] = 'normal'
  }
  
  // 显示绑定结算视图
  const showBindSettle = (model) => {
    currentViewMode.value[model.id] = 'bindSettle'
  }
  
  // 关闭绑定结算视图
  const closeBindSettle = (modelId) => {
    currentViewMode.value[modelId] = 'normal'
  }
  
  
  // 页面加载时获取数据
  onMounted(() => {
    console.log('页面已挂载，开始加载数据')
    console.log('初始状态 - loading:', loading.value, 'modelList长度:', modelList.value.length)
    loadModelList()
  })
  
  // 页面显示时检查是否需要刷新数据
  onShow(() => {
    // 检查是否有刷新标记（编辑或创建成功后设置）
    const needRefresh = uni.getStorageSync('scheduleModelListNeedRefresh')
    if (needRefresh) {
      console.log('检测到需要刷新模式列表')
      uni.removeStorageSync('scheduleModelListNeedRefresh')
      loadModelList()
    }
  })
  
  // 横屏时传入的表单数据
  const formItems = computed(() => [
      {
          label: '模式ID',
          key: 'id'
      },
      {
          label: '模式名称',
          key: 'matchScheduleModelName',
          format(val) {
              return val || '未设置'
          }
      },
      {
          label: '房间数量',
          key: 'roomNum',
          format(val) {
              return val || '自动计算'
          }
      },
      {
          label: '房间类型',
          key: 'roomType',
          format(val) {
              return getRoomTypeText(val)
          }
      },
      {
          label: '启动类型',
          key: 'roomStartType',
          format(val) {
              return getStartTypeText(val)
          }
      },
      {
          label: '参与模式',
          key: 'roomJoinModel',
          format(val) {
              return getJoinModelText(val)
          }
      },
      {
          label: '限制模式',
          key: 'roomLimitModel',
          format(val) {
              return getLimitModelText(val)
          }
      },
      {
          label: '获胜模式',
          key: 'matchWinModel',
          format(val) {
              return getWinModelText(val)
          }
      },
      {
          label: '报名模式',
          key: 'matchRegType',
          format(val) {
              return getRegTypeText(val)
          }
      }
  ])
  
  const formBtns = [
      {
          text: '绑定房间',
          icon: '/src/static/btn_green.png',
          color: '#005918',
          click() {
              showBindRoom(modelList.value[currentModelIndex.value])
          }
      },
      {
          text: '绑定结算',
          icon: '/src/static/btn_yellow.png',
          color: '#9B3B18',
          click() {
              showBindSettle(modelList.value[currentModelIndex.value])
          }
      },
      {
          text: '编辑',
          icon: '/src/static/btn_blue.png',
          color: '#FFFFFF',
          click() {
              editModel(modelList.value[currentModelIndex.value])
          }
      },
      {
          text: '删除',
          icon: '/src/static/btn_red.png',
          color: '#FFFFFF',
          click() {
              openDeleteConfirm(modelList.value[currentModelIndex.value])
          }
      }
  ]
  
  const buttons = [
      {
          text: '创建模式',
          icon: '/static/view1.png',
          click: showCreateForm
      },
      {
          text: '房间模式管理',
          icon: '/static/room.png',
          click: goToRoomModel
      },
      {
          text: '结算方式管理',
          icon: '/static/settlement.png',
          click: goToSettleModel
      }
  ]
  
  
  
  // 当前模式的索引
  const currentModelIndex = ref(0)
  const setCurrentModelIndex = (index) => currentModelIndex.value = index
  
  </script>
  
  <style lang="scss" scoped>
	.view-container{
        display: flex;justify-content: space-between;align-items: center;
        height: calc(100vh - 65rpx);
        padding-right: 20rpx;
        overflow: hidden;
        &-right{
            flex: 1;
            height: 100%;overflow: hidden;
            &-list{
                padding: 10rpx;
                overflow: auto;height: calc(100% - 60rpx);
                &-item{
                    background: #F0F0E4;
                    border-radius: 10rpx;
                    padding: 10rpx;
                    margin-bottom: 10rpx;
                    font-size: 14rpx;
                    .next-button{
                        display: flex;justify-content: end;align-items: center;
                        margin-top: 10rpx;
                        gap: 10rpx;
                        &-item1,&-item2,&-item3,&-item4{
                            width: 108rpx;
                            height: 30rpx;
                            font-size: 14rpx;
                            display: flex;justify-content: center;align-items: center;
                            padding-bottom: 4rpx;
                            color: #fff;
                        }
                        &-item1{
                            background: url('/static/buttons/button6.png') no-repeat center center;
                            background-size: 100% 100%;
                        }
                        &-item2{
                            background: url('/static/buttons/button7.png') no-repeat center center;
                            background-size: 100% 100%;
                        }
                        &-item3{
                            background: url('/static/buttons/button7.png') no-repeat center center;
                            background-size: 100% 100%;
                        }
                        &-item4{
                            background: url('/static/buttons/button2-1.png') no-repeat center center;
                            background-size: 100% 100%;
                        }
                    }
                    .next-row{
                        display: flex;justify-content: space-between;align-items: center;
                        margin-top: 10rpx;
                        view{
                            width: 50%;
                        }
                        text{
                            display: inline-block;
                            font-size: 14rpx;
                            color: #99A1A4;
                            width: 70rpx;
                            text-align: right;
                        }
                    }
                }
            }
        }
        &-left{
            display: flex;flex-direction: column;justify-content: center;align-items: center;
            padding: 10rpx 20rpx;
            view{
                width: 118rpx;box-sizing: border-box;padding-bottom: 10rpx;
                height: 90rpx;
                font-size: 15rpx;
                color: #fff;
                display: flex;justify-content: center;align-items: end;
                margin-bottom: 10rpx;
            }
            &-top{
                background: url('/static/view1.png') no-repeat center center;
                background-size: 100% 100%;
            }
            &-bottom{
                background: url('/static/view2.png') no-repeat center center;
                background-size: 100% 100%;
            }
        }
    }
    
    .loading-container, .empty-state {
        text-align: center;
        color: #333;
        padding: 50rpx;
        font-size: 14rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .loading-spinner {
        width: 60rpx;
        height: 60rpx;
        border: 4rpx solid #f3f3f3;
        border-top: 4rpx solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 20rpx;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    
    .modal-content {
      width: 90%;
      max-height: 80%;
      background: #fff;
      border-radius: 20rpx;
      overflow: hidden;
      
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 2rpx solid #eee;
        
        .modal-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .close-btn {
          width: 60rpx;
          height: 60rpx;
          border: none;
          background: none;
          font-size: 40rpx;
          color: #999;
          line-height: 60rpx;
          margin: 0;
        }
      }
      
      .modal-body {
        padding: 30rpx;
        max-height: 60vh;
        overflow-y: auto;
        
        .form-item {
          margin-bottom: 30rpx;
          
          .form-label {
            display: block;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 15rpx;
            font-weight: bold;
          }
          
          .form-input {
            width: 100%;
            height: 80rpx;
            border: 2rpx solid #eee;
            border-radius: 12rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            background: #fff;
            box-sizing: border-box;
          }
          
          .form-picker {
            width: 100%;
            height: 80rpx;
            border: 2rpx solid #eee;
            border-radius: 12rpx;
            padding: 0 20rpx;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            
            .picker-text {
              font-size: 28rpx;
              color: #333;
            }
            
            .picker-arrow {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
      
      .modal-footer {
        display: flex;
        gap: 20rpx;
        padding: 30rpx;
        border-top: 2rpx solid #eee;
        
        .cancel-btn, .submit-btn {
          flex: 1;
          height: 80rpx;
          border: none;
          border-radius: 12rpx;
          font-size: 28rpx;
          font-weight: bold;
          
          &.cancel-btn {
            background: #f8f9fa;
            color: #666;
            border: 2rpx solid #eee;
          }
          
          &.submit-btn {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: #fff;
            
            &:disabled {
              opacity: 0.6;
            }
          }
        }
      }
    }
  }
  
  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20rpx;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  // 房间模式绑定相关样式
  .bind-info {
    margin-bottom: 30rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    
    .bind-label {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .bind-section {
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      
      .add-btn {
        height: 50rpx;
        padding: 0 20rpx;
        background: #28a745;
        border: none;
        border-radius: 8rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
    
    .bind-list {
      .bind-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        margin-bottom: 15rpx;
        
        .bind-content {
          flex: 1;
          
          .room-id {
            display: block;
            font-size: 26rpx;
            color: #333;
            margin-bottom: 5rpx;
          }
          
          .bind-time {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .unbind-btn {
          height: 50rpx;
          padding: 0 20rpx;
          background: #dc3545;
          border: none;
          border-radius: 8rpx;
          color: #fff;
          font-size: 24rpx;
        }
      }
    }
  }
  
  .room-list {
    .room-item {
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      margin-bottom: 15rpx;
      border: 2rpx solid transparent;
      position: relative;
      
      &.selected {
        border-color: #007bff;
        background: #e3f2fd;
      }
      
      .room-content {
        .room-id {
          display: block;
          font-size: 26rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 5rpx;
        }
        
        .room-info {
          display: block;
          font-size: 24rpx;
          color: #666;
          margin-bottom: 5rpx;
        }
        
        .room-time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .room-status {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        
        .bound-tag {
          background: #6c757d;
          color: #fff;
          padding: 4rpx 8rpx;
          border-radius: 6rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  
  // 结算方式绑定相关样式
  .settle-list {
    .settle-item {
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      margin-bottom: 15rpx;
      border: 2rpx solid transparent;
      position: relative;
      
      &.selected {
        border-color: #28a745;
        background: #d4edda;
      }
      
      .settle-content {
        .settle-id {
          display: block;
          font-size: 26rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 5rpx;
        }
        
        .settle-name {
          display: block;
          font-size: 24rpx;
          color: #28a745;
          margin-bottom: 5rpx;
        }
        
        .settle-type {
          display: block;
          font-size: 24rpx;
          color: #666;
          margin-bottom: 5rpx;
        }
        
        .settle-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .settle-status {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        
        .bound-tag {
          background: #6c757d;
          color: #fff;
          padding: 4rpx 8rpx;
          border-radius: 6rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  
  // 结算方式绑定列表样式
  .bind-list {
    .bind-item {
      .bind-content {
        .settle-id {
          display: block;
          font-size: 26rpx;
          color: #333;
          margin-bottom: 5rpx;
        }
        
        .settle-type {
          display: block;
          font-size: 24rpx;
          color: #28a745;
          margin-bottom: 5rpx;
        }
        
        .bind-time {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  
  // 选择器模态框通用样式
  .picker-modal-content {
    width: 90%;
    max-height: 80%;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .picker-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #eee;
      
      .picker-modal-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .close-btn {
        width: 60rpx;
        height: 60rpx;
        border: none;
        background: none;
        font-size: 40rpx;
        color: #999;
      }
    }
    
    .picker-modal-body {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      .picker-option {
        padding: 20rpx;
        background: #f8f9fa;
        border-radius: 12rpx;
        margin-bottom: 15rpx;
        border: 2rpx solid transparent;
        position: relative;
        cursor: pointer;
        
        &.selected {
          border-color: #007bff;
          background: #e3f2fd;
        }
        
        .option-text {
          font-size: 28rpx;
          color: #333;
        }
        
        .option-check {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
          font-size: 24rpx;
          color: #007bff;
          font-weight: bold;
        }
      }
    }
  }
  
  @media screen and (orientation: landscape) {
      .modal-overlay {
          .modal-content {
              display: flex;
              max-height: 90%;
              flex-direction: column;
              .modal-header {
                  padding: 10rpx;
              }
              .modal-body {
                  box-sizing: border-box;
                  padding: 10rpx;
              }
              .modal-footer {
                  padding: 10rpx;
                  .cancel-btn, .submit-btn {
                      height: 60rpx;
                      line-height: 60rpx;
                  }
              }
          }
      }
  }
  </style> 